<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue发送AJAX请求</title>
	<script type="text/javascript" src="js/axios.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/vue-resource.min.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			new Vue({
				el:'.container',
				data:{
					user:{
						name:'lili',
						age:20
					},
					uid:''
				},
				methods:{
					send(){
						axios({
							method:'get',
							url:'user.json',

						}).then(function(response){
							console.log(response.data);
						}).catch(response => {
							console.log('请求失败');
						});
					},
					sendGet(){
						// axios.get('server.php?name=tom&age=22')
						axios.get('server.php',{
							params:{
								name:'alice',
								age:22
							}
						})
						.then(resp =>{
							console.log(resp);
						}).catch(err =>{
							console.log('请求失败'+err.status+','+err.statusText);
						});
					},
					sendPost(){
						/*axios.post('server.php',{ //这种方式不好使
							params:{
								name:'Tom',
								age:21
							}
						})*/
						// axios.post('server.php','name=tom&age=22')//方式1
						axios.post('server.php',this.user,{
							transformRequest:[
								function(data){
									let params='';
									for(let index in data){
										params+=index+'='+data[index]+'&';
									}
									return params;
								}
							]
						})
						.then(resp =>{
							console.log(resp);
						}).catch(err =>{
							console.log('请求失败'+err.status+','+err.statusText);
						});
					},
					getUserById(uid){
						axios.get('https://api.github.com/users/'+uid)
						.then(resp =>{
							console.log(resp.data);
							this.user=resp.data;
						});
					},
					sendJSONP(){
						// 360搜索
						//curl "https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=ss" -H "Accept-Encoding: gzip, deflate, sdch, br" -H "Accept-Language: zh-CN,zh;q=0.8" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.4549.400 QQBrowser/9.7.12900.400" -H "Accept: */*" -H "Referer: https://www.so.com/" -H "Cookie: __guid=243890691.469798370319655360.1517053380303.792; __huid=10JAAT99A"%"2BcTJNLAgZqGAN3FHzWn2oAyulK5ZjtroYdu8"%"3D" -H "Connection: keep-alive" --compressed
						this.$http.jsonp('https://sug.so.360.cn/suggest',{
							params:{
								word:'a'
							}
						}).then(resp => {
							console.log(resp.data.s);
						});
					},
					sendJSONP2(){
						// 百度搜索
						//curl "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=1429_21108_17001_20880&req=2&sc=eb&csor=0&cb=jQuery110201489512712213834_1520094965287&_=1520094965290" -H "Accept-Encoding: gzip, deflate, sdch, br" -H "Accept-Language: zh-CN,zh;q=0.8" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.4549.400 QQBrowser/9.7.12900.400" -H "Accept: */*" -H "Referer: https://www.baidu.com/" -H "Cookie: BAIDUID=96DE2C33E9A06496D2375380C6E987D1:FG=1; BIDUPSID=96DE2C33E9A06496D2375380C6E987D1; PSTM=1517056969; BDUSS=kE0RE9seDV5aG1oYXJGS00tYWhBMnFuSlprWnpBYU1saTlNWWhNcTFQc1p1YjlhQVFBQUFBJCQAAAAAAAAAAAEAAAAEf5hewfrYr9K7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABksmFoZLJhaN; PSINO=1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=1429_21108_17001_20880" -H "Connection: keep-alive" --compressed
						this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
							params:{
								wd:'a'
							},
							jsonp:'cb' //百度使用的jsonp参数名为cb，所以需要修改默认的callback
						}).then(resp => {
							console.log(resp.data.s);
						});
					}

				}
			});
		}
	</script>
</head>
<body>
	<div class="container">
		<button @click="send">发送AJAX请求</button><br>

		<button @click="sendGet">GET发送AJAX请求</button><br>

		<button @click="sendPost">POST发送AJAX请求</button>
		<br>
		<br>
		GitHub ID: <input type="text" v-model="uid">
		<button @click="getUserById(uid)">获取指定GitHub账户信息并显示</button>
		<br>
		姓名：{{user.name}} <br>
		头像：<img :src="user.avatar_url">

		<hr>

		<button v-on:click="sendJSONP">用vue-resource向360发送jsonp请求</button>
		<br>
		<button v-on:click="sendJSONP2">用vue-resource向百度发送jsonp请求</button>
	</div>
</body>
</html>